<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的入门案例</title>
	</head>
	<body>
		<h1>vue入门案例</h1>
		<div id="app">
			<h1>获取数据：{{msg}}</h1>
			<h1>获取数字：{{number}}</h1>
			<button @click="addNum">点我增加</button>
		</div>
		<script src="../js/vue.js"></script>
		<!-- 使用步骤:
					 1.导入js.文件
					 2.准备根标签
					 3.创建vue对象,并且实现挂载.
					 4.定义属性.实现数据动态取值
					 知识补充: new Vue({}) 函数式编程
				 -->
		<!--
				关于变量说明：
				1.js中变量定义	早期	var  全局变量	没有作用域
				2.let是有作用域的	局部变量
		-->
		<script>
			let app=new Vue({
				el:"#app",
				data:{
					msg:"你好，VueJS",
					number:100
				},
				methods:{
					addNum(){
						this.number+=100
					}
				}
			})
		</script>
	</body>
</html>
